<template>
  <div class="page_index">
    <div class="user-info">

      <el-card shadow="never">
        <div class="tc"><img src="../assets/imgs/daily-icon.png" alt=""></div>
        <div class="title">欢迎使用~<br>
          <small style="color:#666; font-size:20px;">教师信息库&样书邮寄系统 <sup style="color:#999;">v1.0</sup></small>
        </div>
        <!--<div class="tc fwb"><i class="el-icon-download text-primary"></i><a :href="require('../../static/doc/system_intro.pdf')" class="text-primary">使用说明.pdf</a></div>-->
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="ID">
            <span>{{userInfo.id}}</span>
          </el-form-item>

          <el-form-item label="用户名">
            <span>{{userInfo.username}}</span>
          </el-form-item>

          <el-form-item label="真实姓名">
            <span>{{userInfo.real_name}}</span>
          </el-form-item>

          <el-form-item label="手机号码">
            <span>{{userInfo.mobile}}</span>
          </el-form-item>

          <el-form-item label="所属部门">
            <span>{{userInfo.department_name}}</span>
          </el-form-item>

          <el-form-item label="学科">
            <span>{{userInfo.subject_name}}</span>
          </el-form-item>

          <el-form-item label="最近登录时间">
            <span>{{userInfo.last_login_time | formatTime}}</span>
          </el-form-item>

          <el-form-item label="最近登录IP">
            <span>{{userInfo.last_login_ip}}</span>
          </el-form-item>

          <el-form-item label="当前角色">
            <div  style="width:220px;">
              <el-tag type="info" size="mini" style="line-height:20px; height:20px;" v-for="(item,index) in userRole.roles" :key="index">{{item.name}}</el-tag>
            </div>
          </el-form-item>

          <el-form-item label="子角色">
            <div  style="width:220px;">
              <el-tag type="info" size="mini" style="line-height:20px; height:20px;" v-for="(item,index) in userRole.subRoles" :key="index" :class="{ml5: index}">{{item.name}}</el-tag>
            </div>
          </el-form-item>

        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
  import { mapState, mapGetters, mapMutations } from 'vuex'
  import api from '../api/index'
  // import { getHomeData } from '../api/home'

  export default {
    name: 'Index',
    components: {},
    data () {
      return {
        userInfo: {},
        userRole: {}
      }
    },
    computed: {
      ...mapGetters('common', ['subjectNameMaps'])
    },
    watch: {},
    created () {
      // getHomeData().then(res => {
      //   this.userInfo = res.data.info
      //   this.userRole = res.data.roles
      // })
    },
    mounted () {
    },
    methods: {}
  }
</script>

<style lang="less">
  @import '../styles/_mixins-wln.less';

  .page_index {
    padding-top: 5vh;
    padding-bottom: 5vh;
    .title {
      margin-top: 20px;
      font-size: 40px;
      text-align: center;
    }
    .user-info{
      margin: 0 auto;
      width: 800px;
    }
    .demo-table-expand {
      border-top:1px solid #eee;
      padding-top: 20px;
      margin-top: 20px;
      padding-left: 20px;
      padding-right: 20px;
      font-size: 0;
    }
    .demo-table-expand label {
      width: 100px;
      text-align: right;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 350px;
    }
  }
</style>
